<template>
  <div class="about-us">
    <div class="about-us-page">
      <div class="avatar">
        <open-data type="userAvatarUrl"></open-data>
      </div>
      <span class="about-us-text">powered By 前端diaos ©2018 mpvue重构</span>
    </div>
    <div class="footer-text">
      <div>
        <span>个人微信公众号</span> | <span class="official-accounts">前端diaos</span>
      </div>
      <div>
        <span>个人博客</span> | <span class="official-accounts">https://cschensai.github.io</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>
.about-us {
  height: 100vh;
  background: url('//cs-static-assets.oss-cn-beijing.aliyuncs.com/jiudao_miniapp/about_us.png');
  background-origin: center center;
  background-size: 100% 100%;
}
.about-us-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  /* 多余的部分隐藏掉 */
  overflow: hidden;
}
.about-us-text {
  margin-top: 20rpx;
  color: #fff;
  /* 从左到右,竖向展示 */
  writing-mode: vertical-lr;
}
.footer-text {
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: #fff;
  position: absolute;
  left: 30rpx;
  bottom: 20rpx;
}
.official-accounts {
  font-size: 28rpx;
  font-weight: bold;
}
</style>